$(function () {
    var currentPage = 1;
    var pageSize = 5;

    var picArr = []; //存储上传图片信息 
    //1-请求后台商品数据并渲染
    function render() {
        $.ajax({
            url: '/product/queryProductDetailList',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (info) {
                console.log(info);
                //渲染
                $('tbody').html(template('tmp', info));
                // 根据总数生成分页
                setPage(info.total);
            }
        })
    }

    render();

    //2-分页
    function setPage(total) {
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage,
            totalPages: Math.ceil(total / pageSize),
            onPageClicked: function (event, originalEvent, type, page) {
                //为按钮绑定点击事件 page:当前点击的按钮值
                //跳转到对应页面
                currentPage = page;
                //渲染
                render();
            }

        });
    }

    // 3-二级分类下拉列表渲染
    $.ajax({
        url: '/category/querySecondCategoryPaging',
        data: {
            page: 1,
            pageSize: 1000
        },
        dataType: 'json',
        success: function (info) {
            console.log(info);
            $('.dropdown-menu').html(template('tmp-list', info));
        }
    })

    // 4-点击二级分类 设置选中项
    $('.dropdown-menu').on('click', 'a', function () {
        // 把当前a标签的值，赋值给 按钮
        $('.cate-title').text($(this).text());
        // 把id保持到隐藏域
        $('#brandId').val($(this).data('id'));
        // 二级分类表单验证通过
        $('#form').data('bootstrapValidator').updateStatus('brandId', 'VALID');
    })


    // 5- 上传商品图片，只能上传三张 
    // 其实多张图片上传，就是 多个单张图片上传 

    $("#file").fileupload({
        dataType: "json",
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done: function (e, data) {
            console.log(data.result);
            // 只保留最近上传的三张图片 

            var r = data.result; //获取返回图片的信息 

            // 1-把图片添加到 数组中  (向数组最前面添加)
            picArr.unshift(r);
            // 2-让图片显示(向盒子前面添加图片)
            $('.img-box').prepend('<img src="' + r.picAddr + '" height="80" />');



            // 数组长度大于3， 删除最后一元素， 从img-box中移除最后一个元素 
            if (picArr.length > 3) {
                picArr.pop(); //删除最后一个图片 
                $('.img-box img:last-child').remove(); //删除自己  
            }


            //判断 如果图片是3张，则验证通过
            if (picArr.length == 3) {
                $('#form').data('bootstrapValidator').updateStatus('imgStatus', 'VALID');
            }

            console.log(picArr);

            // 数组：  
            // shift() 从前面上 
            // unshift() 从前面加
            // push()  pop();

            // append() 追加子元素  prepend()  前面添加子元素
            // remove() 删除自己， empty(); 清空盒子内容    
        }
    });


    // 6- 表单验证 
    $('#form').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        //3-配置验证字段 
        fields: {
            brandId: {
                validators: {
                    notEmpty: {
                        message: '请选择二级分类'
                    }
                }
            },
            proName: {
                validators: {
                    notEmpty: {
                        message: '请输入商品名称'
                    }
                }
            },
            proDesc: {
                validators: {
                    notEmpty: {
                        message: '请输入商品描述'
                    }
                }
            },
            num: {
                validators: {
                    notEmpty: {
                        message: '请输入库存'
                    },
                    //非0开头数字  
                    // 正则校验
                    regexp: {
                        regexp: /^[1-9]\d*$/, //校验规则
                        message: '库存必须是非0开头的数字'
                    }
                }
            },
            size: {
                validators: {
                    notEmpty: {
                        message: '请输入尺码'
                    },
                    // xx-xx  x是数字 
                    regexp: {
                        regexp: /^[1-9]\d-[1-9]\d$/,
                        message: '尺码格式为xx-xx, x是数字'
                    }
                },
               

            },
            oldPrice: {
                validators: {
                    notEmpty: {
                        message: '请输入原价'
                    }
                }
            },
            price: {
                validators: {
                    notEmpty: {
                        message: '请输入现价'
                    }
                }
            },
            imgStatus: {
                validators: {
                    notEmpty: {
                        message: '请上传3张图片'
                    }
                }
            }
        }
    })

    // 7- 在表单验证通过的情况下， 点击提交按钮，添加商品数据 
    $('#form').on('success.form.bv', function (e) {
        e.preventDefault(); 
        //ajax发生数据 
        var str = $('#form').serialize(); //快速获取表单数据  缺少了图片的数据   name=zs&age=18  & k = v
        picArr = JSON.stringify(picArr); //转成json字符串  
        str = str + '&picArr=' + picArr;
        // console.log(str);
        $.ajax({
            url: '/product/addProduct',
            type: 'post',
            data: str,
            dataType: 'json',
            success: function (info) {
                console.log(info);        
                // 重新渲染第1页 
                currentPage = 1;
                render();
                // 重置表单样式（手动重置其他样式）
                $('#form').data('bootstrapValidator').resetForm(true);
                //手动重置
                $('.cate-title').text('请选择二级分类');
                $('.img-box').empty();
                // 隐藏模态框 
                $('.modal-add').modal('hide');
                // 数据重置  
                picArr = [];
            }
        })
        

    });



})